<template>
  <div>
    <!-- 24h药店 -->
    <div class="shop_24h">
      <div class="top_bar">
        <div class="title">
          <div class="title_left">
            <img src="@/assets/shopList/24hShop.png" alt="" />
            <p class="line"></p>
            <div>全天营业</div>
          </div>
          <div class="title_right">
            <div class="more" @click="toMedicineShopList">查看更多</div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <van-divider></van-divider>
      <div class="shop_list">
        <van-swipe :loop="false" :show-indicators="false" :width="swiperWidth">
          <van-swipe-item v-for="shop in shops" :key="shop.id">
            <div class="shop_item">
              <div class="content">
                <div class="avatar_seal">
                  <div class="avatar"></div>
                  <img src="@/assets/shopList/seal.png" alt="" />
                </div>
                <div class="shop_msg">
                  <div class="name_and_level">
                    <div class="name">{{ shop.name }}</div>
                    <div class="level">
                      <div class="level_detail">
                        <p>{{ shop.level }}</p>
                      </div>
                      <div class="pingjia">{{ shop.pingJia }}</div>
                    </div>
                  </div>
                  <div class="time_and_distance">
                    <div class="time">
                      <div class="business_time">营业时间</div>
                      <div class="detail_time">
                        <p>24h</p>
                      </div>
                    </div>
                    <div class="distance">
                      <img src="@/assets/shopList/distance.png" alt="" />
                      <p>距您</p>
                      <p class="distance_detail">{{ shop.distance }}</p>
                      <p>km</p>
                    </div>
                  </div>
                  <div class="shop_prop">
                    <div
                      v-for="item in shop.tagList"
                      :key="item.id"
                      :class="item.style"
                    >
                      <img v-if="item.imgUrl" :src="item.imgUrl" alt="" />
                      <p>{{ item.title }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="liu_bai"></div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 便民服务点 -->
    <div class="service_point">
      <div class="top_bar">
        <div class="title">
          <div class="title_left">
            <img src="@/assets/shopList/servicePoint.png" alt="" />
          </div>
          <div class="title_right">
            <div class="more">查看更多</div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <van-divider></van-divider>
      <div class="service_point_list">
        <van-swipe :width="swiperWidth" :show-indicators="false" :loop="false">
          <van-swipe-item
            v-for="servicePoint in servicePoints"
            :key="servicePoint.id"
          >
            <div class="service_point_item">
              <div class="content">
                <div class="avatar_seal">
                  <div class="avatar"></div>
                </div>
                <div class="service_point_msg">
                  <div class="name_and_sale">
                    <div class="name">{{ servicePoint.name }}</div>
                    <div class="sale">
                      <p>月售</p>
                      <p class="sale_num">{{ servicePoint.sale }}</p>
                    </div>
                  </div>
                  <div class="time_and_distance">
                    <div class="time">
                      <div class="business_time">营业时间</div>
                      <div class="detail_time">
                        <p>24h</p>
                      </div>
                    </div>
                    <div class="distance">
                      <img src="@/assets/shopList/distance.png" alt="" />
                      <p>距您</p>
                      <p class="distance_detail">{{ servicePoint.distance }}</p>
                      <p>km</p>
                    </div>
                  </div>
                  <div class="shop_prop">
                    <div
                      v-for="item in servicePoint.tagList"
                      :key="item.id"
                      :class="item.style"
                    >
                      <img v-if="item.imgUrl" :src="item.imgUrl" alt="" />
                      <p>{{ item.title }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="liu_bai"></div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { shopList, servicePointList } from './mock'

export default {
  setup() {
    let router = useRouter()
    let shops = reactive(shopList)
    let servicePoints = reactive(servicePointList)
    // 内联样式里的px不torem处理
    let swiperWidth = ref((document.documentElement.clientWidth / 375) * 277)
    let toMedicineShopList = () => {
      router.push('medicineShopList')
    }
    return {
      shops,
      servicePoints,
      swiperWidth,
      toMedicineShopList,
    }
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.shop_24h {
  margin-top: 10px;
  .top_bar {
    width: 100%;
    height: 43px;
    background: #ffffff;
    border-radius: 10px 10px 0px 0px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 6px;
      padding-bottom: 2px;
      .title_left {
        display: flex;
        align-items: center;
        img {
          margin-left: 10.5px;
          margin-right: 5px;
          width: 127px;
        }
        .line {
          width: 2.5px;
          height: 12px;
          background: #999999;
          margin-right: 6px;
          margin-left: 5px;
          margin-bottom: 1px;
        }
        div {
          font-size: 12px;
          height: 16px;
          font-weight: bold;
          color: #999999;
          padding-bottom: 2px;
        }
      }
      .title_right {
        display: flex;
        align-items: center;
        height: 16px;
        padding-bottom: 2px;
        .more {
          font-size: 12px;
          font-weight: 500;
          color: #999999;
        }
        .van-icon {
          margin-top: 3.5px;
          margin-left: 4.5px;
        }
      }
    }
  }
  .shop_list {
    background: #ffffff;
    border-radius: 0px 0px 10px 10px;
    padding-top: 10px;
    padding-bottom: 4px;
    .shop_item {
      display: flex;
      .content {
        padding-top: 11px;
        width: 250px;
        background: linear-gradient(180deg, #edf7ff 0%, #ffffff 100%);
        border-radius: 10px;
        display: flex;
        .avatar_seal {
          .avatar {
            width: 40px;
            height: 35px;
            background: #999;
            margin-left: 8px;
            margin-bottom: 2px;
            border-radius: 2px;
          }
          img {
            width: 35px;
          }
        }
        .shop_msg {
          .name_and_level {
            display: flex;
            margin-left: 10px;
            .name {
              width: 105px;
              font-size: 13px;
              font-weight: 700;
              color: #333333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            }
            .level {
              display: flex;
              align-items: center;
              width: 66px;
              height: 15px;
              border: 1px solid #38cf9d;
              border-radius: 8px;
              margin-left: 14px;
              margin-top: 2px;
              .level_detail {
                width: 15px;
                height: 15px;
                background: #38cf9d;
                border: 0.5px solid #38cf9d;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                p {
                  font-size: 15px;
                  font-weight: 400;
                  color: #ffffff;
                  margin-right: 2px;
                }
              }
              .pingjia {
                height: 12px;
                font-size: 12px;
                font-weight: 700;
                text-align: left;
                color: #38cf9d;
                line-height: 12px;
                margin-left: 11.5px;
                transform: scale(0.9);
              }
            }
          }
          .time_and_distance {
            display: flex;
            margin-top: 8.5px;
            margin-left: 9px;
            .time {
              height: 17.5px;
              background: #258beb;
              border-radius: 8.5px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .business_time {
                font-size: 12px;
                font-weight: 500;
                color: #ffffff;
                margin-left: 2.5px;
                transform: scale(0.84);
              }
              .detail_time {
                width: 30px;
                height: 17px;
                background: #ffffff;
                border: 0.5px solid #258beb;
                border-radius: 9px;
                display: flex;
                justify-content: center;
                align-items: center;
                p {
                  font-size: 12px;
                  font-weight: 500;
                  color: #258beb;
                  transform: scale(0.83);
                  margin-top: 1px;
                }
              }
            }
            .distance {
              display: flex;
              margin-left: 21px;
              align-items: center;
              margin-top: 2.5px;
              img {
                width: 11px;
                margin-right: 3px;
              }
              p {
                font-size: 12px;
                font-weight: bold;
                color: #999999;
                height: 16px;
                line-height: 16px;
              }
              .distance_detail {
                color: #007afd;
                margin: 0 5px;
              }
            }
          }
          .shop_prop {
            display: flex;
            flex-wrap: wrap;
            margin-top: 4.5px;
            margin-left: 8px;
            margin-bottom: 19px;
            width: 187px;
            div {
              margin-top: 5px;
              width: 58px;
              height: 17px;
              line-height: 17px;
              border-radius: 2px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 4px;
              img {
                width: 18px;
              }
            }
            .active_yellow {
              opacity: 0.8;
              background: linear-gradient(#feb372 0%, #da9d55 100%);
              p {
                font-size: 12px;
                font-weight: 500;
                text-align: left;
                color: #ffffff;
                margin-left: -8px;
                transform: scale(0.82);
              }
            }
            .active_green {
              opacity: 0.8;
              background: linear-gradient(#63de9e 1%, #3bb68f 100%);
              p {
                font-size: 12px;
                font-weight: 500;
                color: #ffffff;
                margin-left: -8px;
                transform: scale(0.8);
              }
            }
            .active_blue {
              background: #f0f6fc;
              p {
                font-size: 12px;
                font-weight: 400;
                color: #007afd;
                transform: scale(0.83);
              }
            }
          }
        }
      }
      .liu_bai {
        width: 17px;
        background: #ffffff;
      }
    }
  }
}
.service_point {
  margin-top: 10px;
  .top_bar {
    height: 43px;
    background: #ffffff;
    border-radius: 10px 10px 0px 0px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title_left {
        display: flex;
        img {
          margin-left: 10.5px;
          margin-right: 5px;
          margin-top: 5.5px;
          width: 126px;
        }
      }
      .title_right {
        display: flex;
        align-items: center;
        margin-top: 10.5px;
        .more {
          width: 49px;
          font-size: 12px;
          font-weight: 500;
          color: #999999;
        }
        .van-icon {
          margin-top: 3.5px;
          margin-left: 4.5px;
        }
      }
    }
  }
  .service_point_list {
    background: #ffffff;
    border-radius: 0px 0px 10px 10px;
    padding-top: 10px;
    padding-bottom: 4.5px;
    .service_point_item {
      display: flex;
      .content {
        padding-top: 11px;
        width: 250px;
        background: linear-gradient(180deg, #edf7ff 0%, #ffffff 100%);
        border-radius: 10px;
        display: flex;
        .avatar_seal {
          .avatar {
            width: 40px;
            height: 35px;
            background: #999;
            margin-left: 8px;
            margin-bottom: 2px;
            border-radius: 2px;
          }
        }
        .service_point_msg {
          .name_and_sale {
            display: flex;
            margin-left: 10px;
            justify-content: space-between;
            .name {
              width: 105px;
              font-size: 13px;
              font-weight: 700;
              color: #333333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            }
            .sale {
              display: flex;
              align-items: center;
              p {
                font-size: 11px;
                font-weight: 700;
                color: #38cf9d;
                transform: scale(.9);
              }
              .sale_num{
                margin-left: 2px;
                margin-top: 2.5px;
              }
            }
          }
          .time_and_distance {
            display: flex;
            margin-top: 8.5px;
            margin-left: 9px;
            .time {
              height: 17.5px;
              background: #258beb;
              border-radius: 8.5px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .business_time {
                font-size: 12px;
                font-weight: 500;
                color: #ffffff;
                margin-left: 2.5px;
                transform: scale(0.84);
              }
              .detail_time {
                width: 30px;
                height: 17px;
                background: #ffffff;
                border: 0.5px solid #258beb;
                border-radius: 9px;
                display: flex;
                justify-content: center;
                align-items: center;
                p {
                  font-size: 12px;
                  font-weight: 500;
                  color: #258beb;
                  transform: scale(0.83);
                  margin-top: 1px;
                }
              }
            }
            .distance {
              display: flex;
              margin-left: 21px;
              align-items: center;
              margin-top: 2.5px;
              img {
                width: 11px;
                margin-right: 3px;
              }
              p {
                font-size: 12px;
                font-weight: bold;
                color: #999999;
                height: 16px;
                line-height: 16px;
              }
              .distance_detail {
                color: #007afd;
                margin: 0 5px;
              }
            }
          }
          .shop_prop {
            display: flex;
            flex-wrap: wrap;
            margin-top: 7.5px;
            margin-bottom: 10px;
            margin-left: 10px;
            div {
              width: 57px;
              height: 17px;
              border-radius: 2px;
              margin-bottom: 5px;
              margin-right: 4px;
              display: flex;
              justify-content: space-around;
              img {
                width: 18px;
              }
            }
            .active_blue {
              background: #f0f6fc;
              p {
                font-size: 12px;
                font-weight: 400;
                color: #007afd;
                transform: scale(0.84);
              }
            }
          }
        }
      }
      .liu_bai {
        width: 17px;
        background: #ffffff;
      }
    }
  }
}
/deep/.van-swipe {
  margin-left: 10px;
}
</style>
